// src/pages/StockKline/StockKline.scss

.stock-kline-page {
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 20px;

  .kline-header {
    margin-bottom: 24px;

    .header-content {
      display: flex;
      justify-content: space-between;
      align-items: center;
      background: rgba(255, 255, 255, 0.95);
      backdrop-filter: blur(10px);
      border-radius: 16px;
      padding: 20px 24px;
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
      border: 1px solid rgba(255, 255, 255, 0.2);

      .header-title {
        display: flex;
        align-items: center;
        gap: 12px;

        .header-icon {
          font-size: 32px;
          color: #1890ff;
          animation: pulse 2s infinite;
        }

        h1 {
          margin: 0;
          font-size: 28px;
          font-weight: 700;
          background: linear-gradient(45deg, #1890ff, #722ed1);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
          background-clip: text;
        }

        .symbol-badge {
          .ant-badge-count {
            background: linear-gradient(45deg, #ff4d4f, #ff7a45);
            box-shadow: 0 2px 8px rgba(255, 77, 79, 0.3);
            font-size: 14px;
          }
        }
      }

      .search-wrapper {
        display: flex;
        gap: 12px;
        align-items: center;

        .search-input {
          max-width: 300px;

          .ant-input {
            border-radius: 12px;
            border: 2px solid #e8f4fd;
            background: rgba(255, 255, 255, 0.8);
            font-size: 16px;
            padding: 12px 16px;
            transition: all 0.3s ease;

            &:focus,
            &:hover {
              border-color: #1890ff;
              box-shadow: 0 0 20px rgba(24, 144, 255, 0.2);
              background: rgba(255, 255, 255, 1);
            }
          }

          .ant-btn {
            border-radius: 12px;
            height: 50px;
            background: linear-gradient(45deg, #1890ff, #36cfc9);
            border: none;
            box-shadow: 0 4px 15px rgba(24, 144, 255, 0.3);
            transition: all 0.3s ease;

            &:hover {
              transform: translateY(-2px);
              box-shadow: 0 6px 20px rgba(24, 144, 255, 0.4);
            }
          }
        }

        .period-select {
          .ant-select-selector {
            border-radius: 12px;
            border: 2px solid #e8f4fd !important;
            background: rgba(255, 255, 255, 0.8);
            font-size: 16px;
            padding: 8px 12px;
            transition: all 0.3s ease;

            &:focus,
            &:hover {
              border-color: #1890ff !important;
              box-shadow: 0 0 20px rgba(24, 144, 255, 0.2);
              background: rgba(255, 255, 255, 1);
            }
          }
        }
      }
    }
  }

  .kline-card {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(15px);
    border-radius: 20px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.3);
    overflow: hidden;

    .ant-card-body {
      padding: 0;
    }

    .spin-center {
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 400px;

      .ant-spin-dot {
        i {
          background: linear-gradient(45deg, #1890ff, #722ed1);
        }
      }

      .ant-spin-text {
        font-size: 16px;
        color: #666;
        margin-top: 16px;
      }
    }

    .chart-container {
      height: 500px;
      width: 100%;
    }
  }
}

// 动画效果
@keyframes pulse {
  0% {
    transform: scale(1);
    opacity: 0.8;
  }
  50% {
    transform: scale(1.1);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 0.8;
  }
}
